<template>
    <div class="detail-wrapper">
        <Block>
            <Title :detailData="detailData"></Title>
        </Block>
        <Block>
            <el-tabs v-model="activeName">
                <template v-for="item in tabList">
                    <el-tab-pane :key="item.label" :label="item.label" :name="item.label" v-if="!item.show">
                        <component :is="item.value" v-if="item.label === activeName" :detailData="detailData" />
                    </el-tab-pane>
                </template>
            </el-tabs>
        </Block>
    </div>
</template>
<script setup lang="ts">
import Title from './components/detail/Title.vue';
import BaseInfo from './components/detail/baseInfo/Index.vue';
import ThingModel from './components/detail/thingModel/Index.vue';
import Association from './components/detail/association/Index.vue';
import { modelService, modelThingService, type SysMetadataObject } from '@great/services';
import { useRoute, useRouter } from 'vue-router';
import { Block, useCurrentTab } from '@great/components';
import { useRequest } from 'vue-request';

const tab = useCurrentTab();
const route = useRoute();
const router = useRouter();
const detailData = ref<SysMetadataObject>();
const tabList = computed(() => {
    return [
        {
            label: '基本信息',
            value: markRaw(BaseInfo)
        },
        {
            label: '业务模型',
            value: markRaw(ThingModel)
        },
        {
            label: '关联关系',
            value: markRaw(Association),
            show: detailData.value?.modifierType === 'SINGLE'
        }
    ];
});

const activeName = ref(tabList.value[0].label);

// 获取详情
const getDetail = async () => {
    if (route.params.id) {
        const res = await modelThingService.getDetail(route.params.id as string);
        detailData.value = res.data;

        tab.setTitle(`${tab.getRawTitle()}-${res.data.displayName}`);
    } else {
        ElMessage({
            message: '路由参数不存在',
            type: 'warning',
            onClose: () => {
                router.push('/model/define/list');
            }
        });
    }
};

// 初始化
const init = () => {
    getDetail();
};
init();

const { data: typeData } = useRequest(modelService.attribute.getTypeList, {
    cacheKey: 'attributeTypeList',
    staleTime: -1
});
const attributeTypeList = computed(() => {
    return typeData.value?.data || {};
});

// provide
provide('AttributeTypeList', attributeTypeList);
provide('modelDetail', detailData);
provide('initModelDetail', init);
</script>
<style scoped lang="scss">
.detail-wrapper {
}
</style>
